
<link rel="stylesheet" href="<{$_static}>/css/style.css">
<script type="text/javascript" src="__JS__/Highcharts-4.2.1/js/highcharts.js"></script>
<script type="text/javascript" src="__JS__/Highcharts-4.2.1/js/highcharts-3d.js"></script>
</head>
<div class="Finance_Index">
<!--统计-->   
<ul class="bs-glyphicons">
           <li class="bg-special">
           <h3> <span class="glyphicon glyphicon-yen" aria-hidden="true"></span>
            <span class="glyphicon-class"><{$now_count.count}></span></h3>
            <h3>今日收入金额</h3>
          </li>
          <li  class="bg-special">
          <h3>
           <span class="glyphicon glyphicon-yen" aria-hidden="true"></span>
            <span class="glyphicon-class"><{$yes_count.count}></span></h3>
            <h3>昨天收入金额</h3>
          </li>
          <li  class="bg-danger">
          <h3>
           <span class="glyphicon glyphicon-yen" aria-hidden="true"></span>
            <span class="glyphicon-class"><{$all_count.count}></span></h3>
            <h3>总收入金额</h3>
          </li>
        </ul>
 <div class="clear"></div> 
 <!--标签页-->  
<ul class="nav nav-pills nav-justified" style="position:relative;">
  <li role="presentation" class="active"><a aria-controls="profile" role="tab" data-toggle="tab" href="#container_day">最近几天</a></li>
  <li role="presentation"><a aria-controls="profile" role="tab" data-toggle="tab" href="#container_month">最近几个月</a></li>
  <li role="presentation"><a aria-controls="profile" role="tab" data-toggle="tab" href="#container_year">最近几个年</a></li>
  <li style=" position:absolute; right:0px; top:0px">
    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#settingDayCount"> <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>设置</button></li>
</ul>
 <div class="clear"></div> 

<!--图形-->
<div class="tab-content">
<!--按天分布-->
  <div role="tabpanel" class="tab-pane active"  class="tab-content" id="container_day">
  <!--图形方式-->
  <ul class="nav nav-tabs">
    <li role="presentation" class="active">
    <a  aria-controls="container_day_line" role="tab" data-toggle="tab" href="#container_day_line">收入增长</a></li>
    <li role="presentation">
    <a  aria-controls="container_day_round" role="tab" data-toggle="tab" href="#container_day_round">收入分布</a></li>
     
  </ul>
  <div class="tab-content">
   <div  role="tabpanel" class="tab-pane active" id="container_day_line"></div>
    <div role="tabpanel" class="tab-pane" id="container_day_round" ></div>
   </div>
  </div>
  <!--按月分布-->
  <div role="tabpanel" class="tab-pane"  id="container_month">
    <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a  aria-controls="container_month_line" role="tab" data-toggle="tab" href="#container_month_line">收入增长</a></li>
    <li role="presentation"><a aria-controls="container_month_round" role="tab" data-toggle="tab" href="#container_month_round">收入分布</a></li>
      
  </ul>
  <div class="tab-content">
   <div  role="tabpanel"  class="tab-pane active" id="container_month_line"></div>
    <div role="tabpanel" class="tab-pane" id="container_month_round" ></div>
   </div>
  </div>
    <!--按月分布到这里-->
   <!--按年分布-->
  <div role="tabpanel" class="tab-pane"  id="container_year">
    <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a  aria-controls="container_year_line" role="tab" data-toggle="tab" href="#container_year_line">收入增长</a></li>
    <li role="presentation"><a aria-controls="container_year_round" role="tab" data-toggle="tab" href="#container_year_round">收入分布</a></li>
      
  </ul>
  <div class="tab-content">
   <div  role="tabpanel"  class="tab-pane active" id="container_year_line"></div>
    <div role="tabpanel" class="tab-pane" id="container_year_round" ></div>
   </div>
  </div>
   <!--按年分布-->
</div>  
  <!--图形-->

<!--模态框-->
 <div class="modal fade" id="settingDayCount">
 <form method="get" action="/BoxAddon/Finance/Index/index/">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">关闭</span></button>
                    <h4 class="modal-title">设置统计图</h4>
                </div>
                <div class="modal-body">
                    <div class="with-padding">
                        <label>默认展示天数 </label><input maxlength="2" class="form-control" name="d" value="<{$d}>">

                    </div>
                     <div class="with-padding">
                        <label>默认展示月数 </label><input class="form-control" maxlength="2" name="moth" value="<{$m}>">

                    </div>
					<div class="with-padding">
                        <label>默认展示年数 </label><input class="form-control" maxlength="1" name="y" value="<{$y}>">

                    </div>

                </div>
                <div class="modal-footer">
                    <button class="btn " data-role="saveCountSetting">
                        <i class="icon-ok"></i> 保存成功                    </button>
                    <button class="btn " data-dismiss="modal">
                        <i class="icon-remove"></i> 取消                    </button>
                </div>
            </div>
        </div>
    </form>    
    </div>

    
<script type="text/javascript">
$(function () {
	/**************日期拆线图**************/
	var container_day_line_options={
        title: {
            text: '<{$options_day.day_line_options.title.text}>',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: [<{$options_day.day_line_options.xAxis.categories}>],
			 
			
        },
        yAxis: {
            title: {
                text: '收入金额'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '元'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '收入',
            data: [<{$options_day.day_line_options.series.data}>]
        },]
    };
   
	/**************月份条形图**************/
	var container_month_line_options= {
        chart: {
           // renderTo: 'container_month_line',
            type: 'column',
            margin: 60,
            options3d: {
                enabled: true,
                alpha: 2,
                beta: 0,
                depth: 0,
                viewDistance:25
            }
        },
		 tooltip: {
            valueSuffix: '元'
        },
        title: {
            text: '<{$options_month.day_line_options.title.text}>'
        },
        subtitle: {
            text: ''
        },
        plotOptions: {
            column: {
                depth: 55
            }
        },
		yAxis: {
            title: {
                text: '收入金额'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
		 legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        tooltip: {
            valueSuffix: '元'
        },
		xAxis: {
            categories: [<{$options_month.day_line_options.xAxis.categories}>]
        },
        series: [{
			 name: '收入',
            data: [<{$options_month.day_line_options.series.data}>]
        }]
    };
	
/************选中的日期饼形图*************/
var Options_day={
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: '<{$options_day.options_day.title.text}>'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
		yAxis: {
            title: {
                text: '收入金额'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '元'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '占',
            data: [<{$options_day.options_day.series.data}>]
        }]
    };
		
/************选中的月份的饼形图*************/
var Options_month={
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: '<{$options_month.options_day.title.text}>'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
		yAxis: {
            title: {
                text: '收入金额'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '元'
        },
        series: [{
            type: 'pie',
            name: '占',
            data: [<{$options_month.options_day.series.data}>]
        }]
    };
	
/**************年份条形图**************/
	var container_year_line_options= {
        chart: {
           // renderTo: 'container_month_line',
            type: 'column',
            margin: 40,
            options3d: {
                enabled: true,
                alpha: 2,
                beta: 10,
                depth: 50,
                viewDistance:25
            }
        },
		 tooltip: {
            valueSuffix: '元'
        },
		 legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        title: {
            text: '<{$options_year.day_line_options.title.text}>'
        },
        subtitle: {
            text: ''
        },
        plotOptions: {
            column: {
                depth: 55
            }
        },
		yAxis: {
            title: {
                text: '收入金额'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '元'
        },
		xAxis: {
            categories: [<{$options_year.day_line_options.xAxis.categories}>]
        },
        series: [{
			 name: '收入',
            data: [<{$options_year.day_line_options.series.data}>]
        }]
    };
	
/************选中的日期饼形图*************/
var Options_year={
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: '<{$options_year.options_day.title.text}>'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
		yAxis: {
            title: {
                text: '收入金额'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '元'
        },
        series: [{
            type: 'pie',
            name: '占',
            data: [<{$options_year.options_day.series.data}>]
        }]
    };
 /****日期折线**/
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
 	var id=$(this).attr("href");
	if(id =="#container_day" || id =="#container_day_line"){
	 $('#container_day_line').highcharts(container_day_line_options);		
	}
	
	if(id =="#container_month" || id =="#container_month_line"){
	 $('#container_month_line').highcharts(container_month_line_options);		
	}
	if(id =="#container_year" || id =="#container_year_line"){
	 $('#container_year_line').highcharts(container_year_line_options);		
	}
	if(id =="#container_day_round"){
		 $('#container_day_round').highcharts(Options_day);
	}
	if(id =="#container_month_round"){
		 $('#container_month_round').highcharts(Options_month);
	}
	if(id =="#container_year_round"){
		 $('#container_year_round').highcharts(Options_year);
	}
})
 $('#container_day_line').highcharts(container_day_line_options);	
});
</script>
</div>
 
